import { Descriptions, Divider, Space, Tag } from "antd";
import { history } from "umi";
import { StyledAddBtn, StyledWhiteBtn } from "@/components/button";
import { BookingDataRes } from "@/components/booking-record/types";
import LeftArrow from "@/assets/image/icons/left arrow.svg";
import Calendar from "@/assets/image/icons/calendar.svg";
import MonthlyPark from "@/assets/image/patterns/Monthly Park.png";
import { ProCard } from "@ant-design/pro-components";
import styled from "styled-components";
import "./index.less";
import DateConverterUtils from "@/utils/dateUtils";
import useParkStore from "@/store/parkStore";

interface BookingDataProps {
  bookingDataRes: BookingDataRes[];
}
const BookingRecord: React.FC<BookingDataProps> = ({ bookingDataRes }) => {
  const { setBookingDataRes } = useParkStore();
  const StyledTag = styled(Tag)`
    background-color: #e4f6ea;
    color: #26a461;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    border-radius: 94px;
  `;
  const StyledDetail = styled(StyledWhiteBtn)`
    margin-left: 24px;
  `;

  const BookingLabelStyle = {
    fontFamily: "Roboto",
    fontSize: "14px",
    fontWeight: "400",
    lineHeight: "21px",
    color: "#696767",
  };

  const BookingContentStyle = {
    fontFamily: "Roboto",
    fontSize: "16px",
    fontWeight: "400",
    lineHeight: "24px",
    color: "#202020",
    marginTop: "8px",
  };
  const onClickBtnDetails = (bookingItem: BookingDataRes) => {
    history.push("/mybooking-records/details", bookingItem);
  };

  const onClickPayNow = (bookingItem: BookingDataRes) => {
    setBookingDataRes(bookingItem);
    history.push("/payment/monthly/payment-info", bookingItem);
  };

  // // todo 先造数据
  // bookingDataRes = [
  //   {
  //     carParkEnName: "carParkEnName",
  //     carParkChnName: "carParkChnName",
  //     passType: "Monthly",
  //     vehType: "Private Car",
  //     price: "HK$2,000",
  //     lpnNo: "AC123",
  //     octopus: "70000111",
  //     bookingStatus: "Successful",
  //     bookingId: "0000001",
  //     startDate: "1/10/2024",
  //     endDate: "31/10/2024",
  //     pymPrice: "HK$1,000",
  //   },
  // ];
  return (
    <div className="booking-record-container">
      <ProCard
        className="booking-record"
        headStyle={{ color: "#696767" }}
        style={{ padding: 0, marginBlockStart: 40 }}
        wrap
      >
        <Space direction="vertical" size="middle" style={{ display: "flex" }}>
          {bookingDataRes.map((item, index) => (
            <ProCard
              title={
                <>
                  <img
                    className="calendar-img"
                    src={Calendar}
                    alt="SVG Image"
                  />
                  <span className="pass-type">{item.passType}</span>
                  <Divider type="vertical" className={"divider"} />
                  <StyledTag
                    style={{ backgroundColor: " #e4f6ea", color: "#26a461" }}
                    color="success"
                    bordered={false}
                  >
                    {item.bookingStatus}
                  </StyledTag>
                </>
              }
              extra={
                <>
                  {item.passType === "Monthly" &&
                    item.pymStatus === "Pending" && (
                      <StyledAddBtn onClick={() => onClickPayNow(item)}>
                        Pay Now
                      </StyledAddBtn>
                    )}
                  <StyledDetail
                    // icon={<img src={LeftArrow} alt="SVG Image" />}
                    onClick={() => onClickBtnDetails(item)}
                    type="default"
                    size={"middle"}
                  >
                    Booking Details
                    <img src={LeftArrow} alt="SVG Image" />
                  </StyledDetail>
                </>
              }
              layout="center"
              bordered
            >
              <img className="park-img" src={MonthlyPark} alt="png"></img>
              <Descriptions
                column={6}
                layout="vertical"
                title={`Parking Date: ${DateConverterUtils.strToDate(
                  item.startDate
                )} to ${DateConverterUtils.strToDate(
                  item.endDate
                )} (${DateConverterUtils.calculateDaysDifference(
                  DateConverterUtils.strToDate(item.startDate),
                  DateConverterUtils.strToDate(item.endDate)
                )} Days)`}
                contentStyle={BookingContentStyle}
                labelStyle={BookingLabelStyle}
              >
                <Descriptions.Item label="Vehicle Type">
                  {item.vehType}
                </Descriptions.Item>
                <Descriptions.Item label="License Plate Number">
                  {item.lpnNo}
                </Descriptions.Item>
                <Descriptions.Item label="Octopus No.">
                  {item.octopus}
                </Descriptions.Item>
                <Descriptions.Item label="Payment Amount">
                  {item.pymPrice}
                </Descriptions.Item>
                <Descriptions.Item label="Payment Status">
                  <StyledTag
                    style={{ color: "#214680", backgroundColor: "#DCEBF5" }}
                    color="processing"
                    bordered={false}
                  >
                    Pending
                  </StyledTag>
                </Descriptions.Item>
                <Descriptions.Item label="Car Park">
                  Car Park1
                </Descriptions.Item>
              </Descriptions>
            </ProCard>
          ))}
        </Space>
      </ProCard>
    </div>
  );
};

export default BookingRecord;
